import { CardWithTitle } from "@/components/public/card/card";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import LTable from "@/components/public/lTable/lTable";
import Page from "@/components/public/page/page";
import useNavigator from "@/hooks/useNavigator";
import transferReviewService from "@/modules/channelManagement/transferReview.service";
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "提交时间",
          dataIndex: "create_time",
          align: "center",
          width: "150px",
        },
        {
          title: "订单号",
          dataIndex: "order_no",
          align: "center",
          width: "200px",
        },
        // {
        //   title: "充值来源",
        //   dataIndex: "order_o",
        //   align: "center",
        //   width: "180px",
        // },
        // {
        //   title: "账号类型",
        //   dataIndex: "order_o",
        //   align: "center",
        //   width: "180px",
        // },
        // {
        //   title: "账号名称",
        //   dataIndex: "order_o",
        //   align: "center",
        //   width: "200px",
        // },
        {
          title: "审核状态",
          dataIndex: ["verify_status", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "审核时间",
          dataIndex: "verify_time",
          align: "center",
          width: "100px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      loading: false,
      searchForm: {
        serial_number: {
          type: "input",
          label: "订单号",
          attrs: { placeholder: "请输入订单号" },
        },
        agency_name: {
          type: "input",
          label: "企业名称",
          attrs: { placeholder: "请输入企业名称" },
        },
        create_data: {
          type: "date",
          label: "起保时间",
        },
        picc_order_status: {
          type: "select",
          label: "审核状态",
          attrs: { placeholder: "请选择审核状态" },
          datas: [
            { label: "审核通过", value: 1 },
            { label: "待审核", value: 0 },
            { label: "审核不通过", value: -1 },
          ]
        }
      }
    })
    const LTableRef = ref(null as any);
    const $service = new transferReviewService();
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    return () => (
      <Page>
        <CardWithTitle title="转账审核">
          <LTable
            ref={LTableRef}
            toolbar={state.toolbar}
            service={$service}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              loading={state.loading}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //操作
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        {
                          record.verify_status.value === 0 ? <a-button type="primary"
                            onClick={() => { navigator.push({ name: 'auditing', query: { order_no: record.order_no, verify_status: record.verify_status.value } }) }}
                          >审核</a-button> : <a-button type="primary" onClick={() => { navigator.push({ name: 'auditing', query: { order_no: record.order_no, verify_status: record.verify_status.value } }) }}>查看信息</a-button>
                        }
                      </div>
                    )
                  }
                }
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    )
  }
})